<template>
	<s-layout title="好友申请" :bgStyle="{
		color:'#F6F6F6'
	}">
		<!-- 搜索 -->
		<view class="search-box ss-flex justify-center align-center" :style="{
      top: sheep.$platform.device.statusBarHeight + 44 + 'px',
    }">
			<view class="search ss-flex justify-start align-center ss-p-x-20">
				<uni-icons type="search" size="30" color="#767676"></uni-icons>
				<input class="ss-m-l-15" type="text" placeholder="搜索其他用户"
					placeholder-style="font-size:30rpx;color:#767676;" confirm-type="search" @confirm="confirm">
			</view>
		</view>
		<view style="width: 100%;height: 120rpx;"></view>
		<view class="tips ss-font-28">申请记录</view>
		<!-- 申请列表 -->
		<uni-load-more v-if="state.total > 0 && state.loadStatus === 'loading'" :status="state.loadStatus"
			:content-text="{
							    contentdown: '点击或上拉加载更多',
	}" />
		<s-empty v-if="state.total <= 0 && state.loadStatus === 'noMore'"
			icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无数据"></s-empty>
		<view class="item-box ss-flex justify-between align-center" v-for="(item,index) in state.list" :key="index">
			<view class="item ss-flex justify-start align-center ss-font-32">
				<image class="item-image" :src="cdn(item.image)" mode="aspectFill"></image>
				<view>{{item.nickname}}</view>
			</view>
			<view class="btn">
				<view class="btn-apply" v-if="item.status === 0" @click="change(item,index)">接受</view>
				<view class="btn-text ss-font-24" v-if="item.status === 1">已添加</view>
				<view class="btn-text ss-font-24" v-if="item.status === 2">已拒绝</view>
			</view>
		</view>

		<su-popup :show="state.show" round="10" type="center" @close="state.show = false">
			<view class="InvestBox ss-p-44 ss-flex-col ss-row-between ss-col-center">
				<view class="InvestBox-header">
					通过好友验证
					<uni-icons class="header-icon" type="closeempty" color="#959595" size="18"
						@click="state.show=false"></uni-icons>
				</view>
				<view class="InvestBox-content ss-font-28">
					<view>对方想成为您的好友</view>
					<view class="ss-m-t-10">是否同意对方的好友申请</view>
				</view>
				<view class="InvestBox-btn ss-flex ss-row-between">
					<button class="ss-reset-button btn-cancel" @click="cancel">拒绝</button>
					<button class="ss-reset-button btn-confirm" @click="agree">同意</button>
				</view>
			</view>
		</su-popup>
	</s-layout>
</template>

<script setup>
	import {
		reactive,
		computed
	} from 'vue';
	import sheep from '@/sheep';
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app';
	import {
		cdn,
		udid
	} from '@/im/config/index.js'
	import $store from '@/im/store/im';

	const iMMyInfo = computed(() => $store().userInfo);
	const state = reactive({
		list: [],
		show: false,
		user: {},
		index: null,
		total: 1,
		loadStatus: ''
	})


	onLoad(() => {
		getApplyList()
		wx.$app.setFriendApplicationRead();
		setUnread()
	})

	const setUnread = () => {
		uni.request({
			url: 'https://im-beta.shisan-xi.work/api/settings/friendRead',
			method: 'POST',
			data: {
				to_account: iMMyInfo.value.userID,
			},
			success: (res) => {
				// 因为未读数量没办法实时传过来 需要自己计算 此时需要将未读数量减掉
				$store().unreadNum = $store().unreadNum - $store().unreadCount
			}
		})
	}

	const change = (item, index) => {
		state.user = item
		state.index = index
		state.show = true
	}

	const cancel = () => {
		wx.$app.refuseFriendApplication({
			userID: state.user.account,
		});
		if (state.index !== null) {
			state.list[state.index].status = 2
		}
		state.show = false
	}

	const agree = () => {
		wx.$app.acceptFriendApplication({
			userID: state.user.account,
			type: wx.TIM.TYPES.SNS_APPLICATION_AGREE_AND_ADD
		})
		state.show = false
		if (state.index !== null) {
			state.list[state.index].status = 1
		}
	}

	const confirm = (e) => {
		if (e.detail.value.length <= 0) {
			return
		}
		uni.navigateTo({
			url: `/im/pages/userList?search=${e.detail.value}`
		})
	}

	const getApplyList = async () => {
		state.loadStatus = 'loading';
		uni.request({
			url: 'https://im-beta.shisan-xi.work/api/settings/applyFriendList',
			method: 'GET',
			data: {
				mobile: iMMyInfo.value.userID,
				platform: udid
			},
			success: (res) => {
				if (res.data.code === 0) {
					state.list = res.data.data
					if (state.list.length === 0) {
						state.total = 0
						state.loadStatus = 'noMore';
					} else {
						state.loadStatus = 'more';
					}
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.search-box {
		width: 100%;
		height: 120rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #F1F1F1;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;

		.search {
			width: 706rpx;
			height: 70rpx;
			border-radius: 40rpx;
			background: #E2E2E2;
		}
	}

	.item-box {
		width: 100%;
		height: 130rpx;
		background: #FFFFFF;
		border-bottom: 1rpx solid #F1F1F1;
		padding: 0 22rpx;

		.item {
			height: 130rpx;
			color: #3D3D3D;
		}

		.item-image {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.btn-apply {
			width: 100rpx;
			height: 50rpx;
			border-radius: 10rpx;
			background: #1AAD19;
			font-size: 24rpx;
			line-height: 50rpx;
			text-align: center;
			color: #FFFFFF;
		}

		.btn-text {
			color: #3D3D3D;
		}
	}

	.tips {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 22rpx;
		background-color: #EFEFEF;
	}


	.InvestBox {
		width: 660rpx;
		height: 486rpx;
		border-radius: 24rpx;
		background-color: #FFFFFF;

		.InvestBox-header {
			width: 100%;
			position: relative;
			font-size: 36rpx;
			font-weight: 600;
			line-height: 80rpx;
			text-align: center;
			height: 80rpx;
			letter-spacing: 0px;
			color: #333333;
			border-bottom: 1px solid #EEEEEE;

			.header-icon {
				position: absolute;
				top: -40rpx;
				right: 4rpx;
			}
		}

		.InvestBox-content {
			width: 100%;
			text-align: left;
			color: #767676;
		}

		.InvestBox-btn {
			width: 100%;

			.btn-cancel {
				width: 240rpx;
				height: 80rpx;
				background: #FF9999;
				border-radius: 48rpx;
				font-size: 32rpx;
				font-weight: 500;
				color: #FFFFFF;
			}

			.btn-confirm {
				width: 240rpx;
				height: 80rpx;
				border-radius: 48rpx;
				background: #14C89F;
				font-size: 32rpx;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}
</style>